<template>
  <Panel title="信息发布设备列表" width="380px">
    <div class="table-container">
      <el-table
        :data="deviceList"
        style="width: 100%"
        class="table"
        :row-class-name="rowClass"
        header-row-class-name="table"
        header-cell-class-name="table">
        <el-table-column type="selection" width="26" />
        <el-table-column prop="name" label="名称" width="80" />
        <el-table-column prop="code" label="编号" width="74" />
        <el-table-column prop="area" label="区域" width="72" />
        <el-table-column prop="status" label="开关" width="64">
          <template #default="scope">
            <el-switch v-model="scope.row.enable" />
          </template>
        </el-table-column>
        <el-table-column prop="id" label="节目" width="60">
          <template #default="scope">
            <Icon name="book" :size="18"></Icon>
          </template>
        </el-table-column>
      </el-table>
      <div class="chart" ref="chartRef"></div>
    </div>
  </Panel>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import DeviceTable from "./DeviceTable.vue";

function rowClass(target) {
  switch (target.row.status) {
    case "正常":
      return "row-success";
    case "报警":
      return "row-danger";
    case "故障":
      return "row-warning";
    default:
      return "row-info";
  }
}
const deviceList = ref([
  { id: "1", img: "img", name: "信息发布", code: "A00101", area: "1楼a区", status: "正常", enable: true },
  { id: "2", img: "img", name: "信息发布", code: "A00101", area: "1楼b区", status: "正常", enable: false },
  { id: "3", img: "img", name: "信息发布", code: "A00101", area: "1楼c区", status: "报警", enable: true },
  { id: "4", img: "img", name: "信息发布", code: "A00101", area: "1楼d区", status: "正常", enable: true },
  { id: "5", img: "img", name: "信息发布", code: "A00101", area: "1楼e区", status: "故障", enable: false },
  { id: "5", img: "img", name: "信息发布", code: "A00101", area: "1楼e区", status: "离线", enable: true },
  { id: "5", img: "img", name: "信息发布", code: "A00101", area: "1楼e区", status: "离线", enable: false },
]);

const chartRef = ref();
let chartOption = {
  legend: {
    icon: "circle",
    right: 30,
    top:"20%",
    orient:"vertical",
    data: [
      { name: "离线", itemStyle: { color: "#898989" } },
      { name: "故障", itemStyle: { color: "#FE8D3B" } },
      { name: "报警", itemStyle: { color: "#FF0000" } },
      { name: "打开", itemStyle: { color: "#29EC78" } },
      { name: "关闭", itemStyle: { color: "#2560FF" } },
    ],
    textStyle: {
      color: "#FFFFFF",
    },
  },
  polar: {
    center:["30%","50%"],
    radius: [30, "90%"],
  },
  color: ["#89898990", "#FE8D3B90", "#FF000090", "#29EC7890", "#2560FF90"],
  angleAxis: {
    max: 500,
    startAngle: 90,
    // clockwise: false,
    splitLine: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
  },
  radiusAxis: {
    type: "category",
    splitLine: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
  },
  tooltip: {
    trigger: "axis",
  },
  series: [
    {
      name: "离线",
      type: "bar",
      data: [10],
      coordinateSystem: "polar",
      label: {
        show: true,
        position: "start",
      },
    },
    {
      name: "故障",
      type: "bar",
      data: [200],
      coordinateSystem: "polar",
      label: {
        show: true,
        position: "start",
      },
    },

    {
      name: "报警",
      type: "bar",
      data: [300],
      coordinateSystem: "polar",
      label: {
        show: true,
        position: "start",
      },
    },
    {
      name: "打开",
      type: "bar",
      data: [400],
      coordinateSystem: "polar",
      label: {
        show: true,
        position: "start",
      },
    },
    {
      name: "关闭",
      type: "bar",
      data: [100],
      coordinateSystem: "polar",
      label: {
        show: true,
        position: "start",
      },
    },
  ],
};
onMounted(() => {
  echarts.init(chartRef.value).setOption(chartOption);
});
</script>
<style lang="scss" scoped>
.table-container {
  :deep(.el-table) {
    background-color: transparent;

    .cell {
      display: flex;
      align-items: center;
    }
    tr {
      position: relative;
      background-color: transparent;
    }
    th.el-table__cell {
      background-color: transparent;
      color: #fff;
    }
    td.el-table__cell {
      border-bottom: none;
      margin-bottom: 4px;
    }
    td:first-child::before {
      content: "";
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
    }
  }
  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: transparent;
  }
  :deep(.el-table__body) {
    border-spacing: 0px 12px;
    color: #fff;
  }
  :deep(.el-table__inner-wrapper) {
    &::before {
      display: none;
    }
  }

  :deep(.row-success) {
    background: linear-gradient(90deg, #29ec7840 2%, rgba(41, 236, 120, 0) 99%);
    & td:first-child::before {
      background-color: #29ec78;
    }
  }
  :deep(.row-warning) {
    background: linear-gradient(90deg, #fe8d3b40 2%, rgba(254, 141, 59, 0) 99%);
    & td:first-child::before {
      background-color: #fe8d3b;
    }
  }
  :deep(.row-danger) {
    background: linear-gradient(90deg, #ff000040 2%, rgba(255, 0, 0, 0) 99%);
    & td:first-child::before {
      background-color: #ff0000;
    }
  }
  :deep(.row-info) {
    background: linear-gradient(90deg, #89898940 2%, rgba(137, 137, 137, 0) 99%);
    & td:first-child::before {
      background-color: #898989;
    }
  }

  .chart {
    width: 100%;
    height: 260px;
  }
}
</style>
